<template>
  <div>
    <pageHeader
      :title="auntType === 1 ? '样品认证' : '样品试用认证'"
      :breadCrumb="breadCrumb"
      :show-back="true"
    >
      <template #footer>
        <a-space v-if="authData.state === 1">
          <a-button type="outline" status="danger" @click="cancel"
            >取消</a-button
          >
          <!-- <a-button type="primary">保存</a-button> -->
          <a-button type="primary" status="success" @click="TaskRelease">
            <template #icon><icon-storage /></template>
            任务下达</a-button
          >
        </a-space>
      </template>
      <div>
        <h1 class="title"
          >供应商{{ auntType === 1 ? '样品认证' : '样品试用认证' }}流程
        </h1>
        <!-- 样品认证结果 -->
        <div v-if="authData.state === 4 || authData.state === 5">
          <div class="title-item">
            <span style="padding-left: 40px"
              >{{ auntType === 1 ? '样品认证' : '样品试用认证' }}结果</span
            >
          </div>
          <div style="margin-top: 10px; margin-left: 60px">
            <a-space :size="30" direction="vertical" fill>
              <div
                >供应商如果存在多项样品同时认证，那么只需要其中有一项样品认证合格，那么在样品试用认证中视为合格，但要标注好认证通过的样品，因为如果需要采购的时候，只会采购通过认证的产品；<br />
                其它不通过的产品，需要供应商整改之后，再提交认证，只有通过认证之后，才会进入可采购目录。</div
              >
              <div>
                是否通过认证：

                <a-radio-group
                  size="large"
                  disabled
                  :default-value="authData.state === 4 ? 1 : 2"
                >
                  <a-radio
                    :value="1"
                    :style="{
                      marginRight: '20px',
                    }"
                  >
                    <template #radio="{ checked }">
                      <div
                        :style="{
                          display: 'flex',
                          width: '135px',
                        }"
                        :class="checked ? 'checked-radio' : 'unchecked-radio'"
                      >
                        <div
                          :style="{
                            width: '35px',
                            textAlign: 'center',
                          }"
                          :class="
                            checked
                              ? 'radio-icon-box-checked'
                              : 'radio-icon-box-unchecked'
                          "
                        >
                          <icon-check-circle
                            :class="
                              checked
                                ? 'radio-icon-checked'
                                : 'radio-icon-unchecked'
                            "
                            class="radio-icon"
                            size="20px"
                          />
                        </div>
                        <div
                          :style="{
                            width: '100px',
                            textAlign: 'center',
                          }"
                        >
                          通过
                        </div>
                      </div>
                    </template>
                  </a-radio>
                  <a-radio :value="2">
                    <template #radio="{ checked }">
                      <div
                        :style="{
                          display: 'flex',
                          width: '135px',
                        }"
                        :class="
                          checked ? 'checked-radio-no' : 'unchecked-radio'
                        "
                      >
                        <div
                          :style="{
                            width: '35px',
                            textAlign: 'center',
                          }"
                          :class="
                            checked
                              ? 'radio-icon-box-checked-no'
                              : 'radio-icon-box-unchecked'
                          "
                        >
                          <icon-check-circle
                            :class="
                              checked
                                ? 'radio-icon-checked-no'
                                : 'radio-icon-unchecked'
                            "
                            class="radio-icon"
                            size="20px"
                          />
                        </div>
                        <div
                          :style="{
                            width: '100px',
                            textAlign: 'center',
                          }"
                        >
                          不通过
                        </div>
                      </div>
                    </template>
                  </a-radio>
                </a-radio-group>
              </div>
              <div>
                <a-space :size="20" direction="vertical" fill>
                  <div> 认证意见： </div>
                  <a-textarea
                    v-model="authData.authPoint"
                    placeholder="请输入意见"
                    allow-clear
                    disabled
                  />
                </a-space>
              </div>
            </a-space>
          </div>
        </div>

        <div v-if="authData.state === 4 || authData.state === 5">
          <div class="title-item">
            <span style="padding-left: 40px">认证的产品</span>
          </div>
          <div>
            <a-space
              style="margin-top: 20px; margin-left: 60px"
              :size="30"
              direction="vertical"
              fill
            >
              <div v-for="item in authData.productItem" :key="item.id"
                ><a-space :size="50">
                  <div
                    >样品名称：
                    <a-input
                      :style="{ width: '320px' }"
                      placeholder="Please enter something"
                      v-model="item.name"
                      disabled
                    />
                  </div>
                  <div>
                    <a-radio-group
                      size="large"
                      disabled
                      v-model="item.authState"
                    >
                      <a-radio
                        :value="2"
                        :style="{
                          marginRight: '20px',
                        }"
                      >
                        <template #radio="{ checked }">
                          <div
                            :style="{
                              display: 'flex',
                              width: '135px',
                            }"
                            :class="
                              checked ? 'checked-radio' : 'unchecked-radio'
                            "
                          >
                            <div
                              :style="{
                                width: '35px',
                                textAlign: 'center',
                              }"
                              :class="
                                checked
                                  ? 'radio-icon-box-checked'
                                  : 'radio-icon-box-unchecked'
                              "
                            >
                              <icon-check-circle
                                :class="
                                  checked
                                    ? 'radio-icon-checked'
                                    : 'radio-icon-unchecked'
                                "
                                class="radio-icon"
                                size="20px"
                              />
                            </div>
                            <div
                              :style="{
                                width: '100px',
                                textAlign: 'center',
                              }"
                            >
                              通过
                            </div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="3">
                        <template #radio="{ checked }">
                          <div
                            :style="{
                              display: 'flex',
                              width: '135px',
                            }"
                            :class="
                              checked ? 'checked-radio-no' : 'unchecked-radio'
                            "
                          >
                            <div
                              :style="{
                                width: '35px',
                                textAlign: 'center',
                              }"
                              :class="
                                checked
                                  ? 'radio-icon-box-checked-no'
                                  : 'radio-icon-box-unchecked'
                              "
                            >
                              <icon-check-circle
                                :class="
                                  checked
                                    ? 'radio-icon-checked-no'
                                    : 'radio-icon-unchecked'
                                "
                                class="radio-icon"
                                size="20px"
                              />
                            </div>
                            <div
                              :style="{
                                width: '100px',
                                textAlign: 'center',
                              }"
                            >
                              不通过
                            </div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                  </div>
                </a-space>
              </div>
            </a-space>
          </div>
        </div>

        <div class="title-item">
          <span style="padding-left: 40px">认证任务</span>
        </div>
        <div class="info-item">
          <div style="width: 100%; display: flex; margin: 20px 50px">
            <a-space>
              <div
                style="
                  width: 4px;
                  height: 15px;
                  background-color: rgba(61, 126, 255, 1);
                  border: none;
                  border-radius: 2px;
                "
              >
              </div>
              <div>基本信息</div>
            </a-space>
          </div>
          <div style="width: 100%; display: flex; justify-content: center"
            ><a-form style="width: 60%" :model="formlist" auto-label-width>
              <a-row :gutter="24" justify="space-between">
                <a-col :span="11">
                  <a-form-item field="posts.post2" label="认证单号："
                    ><a-input
                      v-model="authData.number"
                      :disabled="authData.state !== 1"
                  /></a-form-item>
                </a-col>
                <a-col :span="11">
                  <a-form-item field="posts.post2" label="供应商编号："
                    ><a-input
                      v-model="formlist.list.number"
                      placeholder=""
                      allow-clear
                      disabled
                  /></a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="24" justify="space-between">
                <a-col :span="11">
                  <a-form-item field="posts.post2" label="供应商名称："
                    ><a-input
                      v-model="formlist.list.name"
                      placeholder=""
                      disabled
                      allow-clear
                  /></a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="24" justify="space-between">
                <a-col :span="11">
                  <a-form-item field="posts.post2" label="任务下达时间：">
                    <a-date-picker
                      v-model="authData.taskReleasTime"
                      :disabled="authData.state !== 1"
                      style="width: 200px"
                  /></a-form-item>
                </a-col>
                <a-col :span="11">
                  <a-form-item field="posts.post2" label="下单人：">
                    <a-input
                      :style="{ width: '320px' }"
                      placeholder="Please enter something"
                      v-model="authData.taskReleaserName"
                      disabled
                      allow-clear
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <div
            style="width: 100%; display: flex; margin: 20px 50px"
            v-if="authData.state != 1"
          >
            <a-space>
              <div
                style="
                  width: 4px;
                  height: 15px;
                  background-color: rgba(61, 126, 255, 1);
                  border: none;
                  border-radius: 2px;
                "
              >
              </div>
              <div>执行信息</div>
            </a-space>
          </div>
          <div
            style="width: 100%; display: flex; justify-content: center"
            v-if="authData.state != 1"
            ><a-form style="width: 60%" :model="authData" auto-label-width>
              <a-row :gutter="24" justify="space-between">
                <a-col :span="11">
                  <a-form-item field="posts.post2" label="任务负责人："
                    ><a-input
                      v-model="authData.headManName"
                      :disabled="authData.state !== 1"
                      placeholder=""
                      allow-clear
                  /></a-form-item>
                </a-col>
                <a-col :span="11">
                  <a-form-item field="posts.post2" label="供应商状态：">
                    <div
                      :class="
                        authData.state === 2
                          ? 'Qualified'
                          : authData.state === 3
                          ? 'Examining'
                          : authData.state === 4
                          ? 'Pass'
                          : 'NoPass'
                      "
                    >
                      <span>
                        {{
                          authData.state === 2
                            ? '待执行'
                            : authData.state === 3
                            ? '执行中'
                            : authData.state === 4
                            ? '通过'
                            : '不通过'
                        }}
                      </span>
                    </div>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <!-- <a-col :span="11">
                <a-form-item field="posts.post2" label="任务结束时间："
                  ><a-input placeholder="" allow-clear
                /></a-form-item>
              </a-col> -->
                <!-- <a-col :span="12">
                <a-form-item field="posts.post2" label="供应商状态：">
                  <div
                    :class="
                      authData.state === 2
                        ? 'Qualified'
                        : authData.state === 3
                        ? 'Examining'
                        : authData.state === 4
                        ? 'Pass'
                        : 'NoPass'
                    "
                  >
                    <span>
                      {{
                        authData.state === 2
                          ? '待执行'
                          : authData.state === 3
                          ? '执行中'
                          : authData.state === 4
                          ? '通过'
                          : '不通过'
                      }}
                    </span>
                  </div>
                </a-form-item>
              </a-col> -->
              </a-row>
            </a-form>
          </div>
          <div style="width: 100%; display: flex; margin: 20px 50px">
            <a-space>
              <div
                style="
                  width: 4px;
                  height: 15px;
                  background-color: rgba(61, 126, 255, 1);
                  border: none;
                  border-radius: 2px;
                "
              >
              </div>
              <div>任务样品明细：</div>
            </a-space>
          </div>
          <div style="width: 80%; margin-left: 10%">
            <a-table
              bordered
              stripe
              :style="{
                width: '100%',
              }"
              :data="authData.productItem"
              :pagination="false"
            >
              <template #columns>
                <a-table-column :width="80" align="center">
                  <template #title> 序号 </template>
                  <template #cell="{ rowIndex }">
                    {{ rowIndex + 1 }}
                  </template>
                </a-table-column>
                <a-table-column title="产品明细">
                  <a-table-column
                    title="物料类型"
                    data-index="materialName"
                    align="center"
                    :width="100"
                  >
                  </a-table-column>
                  <a-table-column
                    title="物料编码"
                    data-index="number"
                    align="center"
                    :width="100"
                  >
                  </a-table-column>
                  <a-table-column
                    title="物料名称"
                    data-index="name"
                    align="center"
                    :width="100"
                  >
                  </a-table-column>
                  <a-table-column
                    title="规格型号"
                    data-index="spec"
                    align="center"
                    :width="100"
                  >
                  </a-table-column>
                  <a-table-column
                    title="样品数量"
                    data-index="amount"
                    align="center"
                    :width="100"
                  >
                    <template #cell="{ record }">
                      <a-input-number
                        :min="1"
                        v-model="record.amount"
                        :disabled="authData.state !== 1"
                      />
                    </template>
                  </a-table-column>
                  <a-table-column title="基本单位" align="center" :width="100">
                    <template #cell="{ record }">
                      <a-input
                        disabled
                        v-model="record.basicUnitName"
                        allow-clear
                      />
                    </template>
                  </a-table-column>
                  <!-- <a-table-column
                  title="单位单价"
                  data-index="singlePrice"
                  align="center"
                  :width="100"
                >
                  <template #cell="{ record }">
                    <a-input v-model="record.singlePrice" allow-clear />
                  </template>
                </a-table-column> -->
                </a-table-column>
              </template>
            </a-table>
          </div>
          <div style="width: 100%; margin: 20px 50px">
            <a-space direction="vertical" fill>
              <div> 注意事项： </div>
              <div>
                <a-textarea
                  v-model="authData.description"
                  placeholder=""
                  :disabled="authData.state !== 1"
                  allow-clear
                />
              </div>
            </a-space>
          </div>
          <!-- 222 -->
          <div>
            <div
              v-if="authData.state === 1"
              style="width: 100%; margin: 20px 50px"
            >
              <a-space :size="20" direction="vertical" fill>
                <div>验厂所需附件：</div>
                <UploadFile
                  ref="FileRef"
                  v-model:file-list="fileAll"
                  :limit="0"
                  :isShowRemove="route.query.state === 'add'"
                  :disabled="route.query.state !== 'add'"
                ></UploadFile>
                <!-- <div v-for="(element, index) in fileAll" :key="index">
                <a-space direction="vertical" fill>
                  <div>
                    <div class="uploadFile" v-if="element.name">
                      <span>{{ element.name }} </span
                      ><div
                        ><a :href="element.fileAddr" :download="element.name"
                          >下载</a
                        ><a-button
                          type="text"
                          @click="delFile(index)"
                          status="danger"
                          :disabled="route.query.state !== 'add'"
                          >删除</a-button
                        ></div
                      ></div
                    >
                  </div>
                </a-space>
              </div>
              <a-button
                type="primary"
                :disabled="route.query.state !== 'add'"
                @click="upload(index)"
                >上传文件</a-button
              > -->
              </a-space>
            </div>
          </div>
          <!-- 任务执行人 -->
          <div v-if="authData.state === 1">
            <div style="width: 100%; display: flex; margin: 20px 50px">
              <a-space>
                <div
                  style="
                    width: 4px;
                    height: 15px;
                    background-color: rgba(61, 126, 255, 1);
                    border: none;
                    border-radius: 2px;
                  "
                >
                </div>
                <div>任务执行人</div>
              </a-space>
            </div>
            <div v-if="authData.state === 1" style="margin-left: 30px">
              <a-form
                ref="formRef"
                :model="authData"
                :style="{ width: '600px' }"
                @submit="handleSubmit"
              >
                <a-form-item
                  :rules="[{ required: true, message: '请选择任务负责人' }]"
                  field="headMan"
                  label="任务负责人:"
                  required
                >
                  <a-select
                    v-model="authData.headMan"
                    :style="{ width: '320px' }"
                    placeholder="请选择任务负责人"
                  >
                    <a-option
                      v-for="item in Personne"
                      :key="item.id"
                      :value="item.id"
                      >{{ item.name }}</a-option
                    >
                  </a-select>
                </a-form-item>
              </a-form>
            </div>
          </div>
        </div>

        <!-- 样品认证报告 -->
        <div
          v-if="
            authData.state === 3 || authData.state === 4 || authData.state === 5
          "
        >
          <div class="title-item" style="position: relative">
            <span style="padding-left: 40px"> 样品认证报告</span>
          </div>
          <a-empty v-if="!authData.authReport.length" />
          <div
            v-for="(item, index) in authData.authReport"
            style="width: 90%; margin: 20px 60px"
            :key="index"
          >
            <a-space :size="30" direction="vertical" fill>
              <div>
                <a-space :size="30">
                  <div class="Certification-report-item">
                    <div>第{{ index + 1 }}次</div>
                  </div>
                  <div>
                    <div
                      >样品检测时间：{{
                        dayjs(item.batchTestTime).format('YYYY-MM-DD HH:mm:ss')
                      }}</div
                    >
                  </div>
                </a-space>
              </div>
              <a-table
                bordered
                stripe
                :style="{
                  width: '100%',
                }"
                :data="item.productReport"
                :pagination="false"
              >
                <template #columns>
                  <a-table-column
                    title="样品编码"
                    data-index="number"
                    align="center"
                    :width="100"
                  >
                  </a-table-column>
                  <a-table-column
                    title="样品名称"
                    data-index="name"
                    align="center"
                    :width="100"
                  >
                  </a-table-column>
                  <a-table-column
                    title="检测结果"
                    data-index="testResult"
                    align="center"
                    :width="100"
                  >
                    <template #cell="{ record }">
                      <a-radio-group
                        size="large"
                        v-model="record.testResult"
                        :disabled="authData.isOver !== 0"
                      >
                        <a-radio
                          :value="1"
                          :style="{
                            marginRight: '20px',
                          }"
                        >
                          <template #radio="{ checked }">
                            <div
                              :style="{
                                display: 'flex',
                                width: '135px',
                              }"
                              :class="
                                checked ? 'checked-radio' : 'unchecked-radio'
                              "
                            >
                              <div
                                :style="{
                                  width: '35px',
                                  textAlign: 'center',
                                }"
                                :class="
                                  checked
                                    ? 'radio-icon-box-checked'
                                    : 'radio-icon-box-unchecked'
                                "
                              >
                                <icon-check-circle
                                  :class="
                                    checked
                                      ? 'radio-icon-checked'
                                      : 'radio-icon-unchecked'
                                  "
                                  class="radio-icon"
                                  size="20px"
                                />
                              </div>
                              <div
                                :style="{
                                  width: '100px',
                                  textAlign: 'center',
                                }"
                              >
                                合格
                              </div>
                            </div>
                          </template>
                        </a-radio>
                        <a-radio :value="2">
                          <template #radio="{ checked }">
                            <div
                              :style="{
                                display: 'flex',
                                width: '135px',
                              }"
                              :class="
                                checked ? 'checked-radio-no' : 'unchecked-radio'
                              "
                            >
                              <div
                                :style="{
                                  width: '35px',
                                  textAlign: 'center',
                                }"
                                :class="
                                  checked
                                    ? 'radio-icon-box-checked-no'
                                    : 'radio-icon-box-unchecked'
                                "
                              >
                                <icon-check-circle
                                  :class="
                                    checked
                                      ? 'radio-icon-checked-no'
                                      : 'radio-icon-unchecked'
                                  "
                                  class="radio-icon"
                                  size="20px"
                                />
                              </div>
                              <div
                                :style="{
                                  width: '100px',
                                  textAlign: 'center',
                                }"
                              >
                                不合格
                              </div>
                            </div>
                          </template>
                        </a-radio>
                      </a-radio-group></template
                    >
                  </a-table-column>
                  <a-table-column
                    title="样品试用报告"
                    data-index="spec"
                    align="center"
                    :width="100"
                  >
                    <template #cell="{ record }"
                      ><a-button
                        v-if="!record.file.length"
                        :disabled="authData.isOver !== 0"
                        type="primary"
                        @click="upload(record)"
                        >上传文件</a-button
                      >
                      <div v-if="record.file.length" class="uploadFile">
                        <div>
                          <a
                            :href="record.file[0].fileAddr"
                            :download="record.file[0].name"
                            >{{ record.file[0].name }}</a
                          ></div
                        ><div
                          ><icon-close
                            v-if="authData.isOver === 0"
                            @click="delUpload(record)" /></div
                      ></div>
                    </template>
                  </a-table-column>
                  <!-- 操作item -->
                  <a-table-column
                    align="center"
                    :width="150"
                    fixed="right"
                    title="操作"
                  >
                    <template #cell="{ rowIndex }">
                      <a-popconfirm
                        @ok="delReport(index, rowIndex)"
                        content="确定删除吗"
                        type="error"
                      >
                        <a-button
                          type="text"
                          :style="{
                            color: 'red',
                          }"
                          >删除</a-button
                        >
                      </a-popconfirm>
                    </template>
                  </a-table-column>
                </template>
              </a-table>
            </a-space>
          </div>
        </div>
      </div>
    </pageHeader>

    <addSampleDetails
      v-model:visible="modalVisible"
      :id="supplierId"
      :type="auntType"
      @addSmpleDetails="addSmpleDetails"
    >
    </addSampleDetails>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, computed, ref, watchEffect } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  // import { getSupplierauth } from '@/api/buy-management/supplier-management/base-setting/index';
  import { cloneDeep } from 'lodash';
  import {
    postSupplierProduct,
    getSupplierProduct,
    delSupplierProduct,
    putSupplierAuth,
    postSupplierAuthProduct,
  } from '@/api/buy-management/supplier-management/supplier-certification/index';
  import { GetSupplierPrimaryDetail } from '@/api/buy-management/supplier-management/supplier-primary-list/index';
  import { GetSupplierStateInfo } from '@/api/buy-management/supplier-management/base-setting/index';
  import { GetPersonnelinformation } from '@/api/home/System settings/personal-information/index';
  import dayjs from 'dayjs';
  import { isTSEntityName } from '@babel/types';
  import { openChoiceFile } from '@/utils/file';
  import { FileUpload } from '@/utils/upload';

  const formList = reactive({
    value1: '',
    value2: '',
  });
  const formRef = ref();
  const route = useRoute();
  const { gys, auth, type } = route.query;
  const router = useRouter();
  const modalVisible = ref();
  const tableTurnRef = ref();
  const uploadFileShow = ref(false);
  const breadCrumb: string[] = ['采购管理', '供应商管理', '供应商认证项目'];
  const formlist: any = reactive({
    list: {},
  });
  let authData: any = ref({ file: [] });
  const AuthProduct = ref([]);
  const ShowResults = ref(false);
  const Order = ref(JSON.parse(sessionStorage.getItem('loginInfo') as any));
  const auntType = ref(Number(route.query.type));
  const supplierId = ref();
  const state = route.query.state;

  const fetchSupplierDetails = async () => {
    const { gys, auth } = route.query;
    const [primaryDetail, supplierProduct] = await Promise.all([
      GetSupplierPrimaryDetail({ id: gys }),
      getSupplierProduct({ id: auth }),
    ]);
    formlist.list = primaryDetail;
    supplierId.value = Number(gys);
    authData.value = supplierProduct;

    const hasAuthState = authData.value.product.some(
      (element: any) => element.authState != null
    );
    ShowResults.value = hasAuthState;

    authData.value.taskReleaser = Order.value.id;
    authData.value.taskReleaserName = Order.value.name;
    authData.value.taskReleasTime = new Date().toJSON();
    if (authData.value.state === 1) {
      authData.value.productItem = primaryDetail.product.filter(
        (element) => element.authState === 1
      );
    }
    authData.value.headMan = null;
  };

  let fileAll = computed({
    get() {
      const newarr = authData.value.file.map((element: any) => {
        return {
          sourceAddr: element.addr,
          fileUrl: element.fileAddr,
          fileName: element.name,
        };
      });
      return newarr.length > 0 ? newarr : [];
    },
    set(val: any[]) {
      authData.value.file =
        val?.map((element) => {
          return {
            addr: element.sourceAddr,
            name: element.fileName,
            fileAddr: element.fileUrl,
          };
        }) || [];
    },
  });

  fetchSupplierDetails();

  const SampleDetailsData = ref([
    {
      name: '',
      model: '',
      spec: '',
      singlePrice: '',
      singleUint: '',
      amount: '',
    },
  ]);

  // 获取供应商状态
  const getrStateInfo = async () => {
    const res = await GetSupplierStateInfo();
  };
  getrStateInfo();

  // 获取人员信息
  const Personne = ref();
  const Personnelinformation = async () => {
    const res = await GetPersonnelinformation({ page: 0, size: 9999 });
    Personne.value = res.content.data;
  };
  Personnelinformation();

  // 点击添加商品
  const addSample = () => {
    modalVisible.value = true;
  };

  // 新增样品明细
  const addSmpleDetails = (formData: any) => {
    authData.value.product = formData;
    authData.value.productItem = formData;
  };

  const StateData = ref();
  const authStateData = (key) => {
    StateData.value = key;
  };

  // 执行
  const carryout = async () => {
    let date = ref(new Date().toJSON());
    const res = await putSupplierAuth({
      id: Number(route.query.auth),
      supplierId: formlist.list.id,
      taskReleasTime: date.value,
      state: 3,
      ...authData.value,
    });
    router.go(-1);
  };

  // 任务下达
  const TaskRelease = async (type: any) => {
    formRef.value.validate(async (res: any) => {
      if (!res) {
        authData.value.product.map((item: any) => {
          item.singlePrice = Number(item.singlePrice);
          item.amount = Number(item.amount);
          return item;
        });
        authData.value.state = 2;
        const res = await putSupplierAuth(authData.value);
        router.go(-1);
      }
    });
  };

  const cancel = () => {
    router.go(-1);
  };

  const addFile = () => {
    authData.value.file.push({});
  };

  const form = reactive<{ file?: File }>({});

  const upload = async (Uindex) => {
    let file = new FormData();
    form.file = await openChoiceFile(
      ['.mp4', '.pdf', '.png', '.txt', '.jpg', '.docx'],
      1024 * 1024 * 10
    );
    file.append('data', form.file);
    const res = await FileUpload(file);
    authData.value.file.push({
      name: res.data.data.name,
      addr: res.data.data.sourceAddr,
      fileAddr: res.data.data.addr,
      fileType: 2,
    });
    uploadFileShow.value = true;
  };

  const delFile = (index) => {
    authData.value.file.splice(index, 1);
  };
</script>

<style scoped lang="less">
  .basic-item {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(242, 243, 245, 0.852);
  }

  .title {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .title-item {
    width: 95%;
    height: 60px;
    margin: auto;
    background-color: rgba(245, 247, 250);
    line-height: 60px;
    margin-top: 20px;
  }

  .info-item {
    width: 100%;
  }

  .report-item {
    width: 95%;
    height: 60px;
    margin: auto;
    background-color: rgba(245, 247, 250);
    line-height: 60px;
  }

  .unchecked-radio {
    background-color: #fff;
    color: #dcdfe6;
    border: 1px solid #dcdfe6;
    font-weight: 700;
    font-size: 13px;
  }
  .checked-radio {
    background-color: rgb(49, 194, 124);
    color: #fff;
    border: 1px solid rgb(49, 194, 124);
    font-weight: 700;
    font-size: 13px;
  }

  .checked-radio-no {
    background-color: rgb(255, 0, 0);
    color: #fff;
    border: 1px solid rgb(255, 0, 0);
    font-weight: 700;
    font-size: 13px;
  }
  .radio-icon-box-checked {
    border: 1px solid rgb(49, 194, 124);
    background-color: #fff;
  }
  .radio-icon-box-checked-no {
    border: 1px solid rgb(255, 0, 0);
    background-color: #fff;
  }
  .radio-icon-box-unchecked {
    border: 1px solid rgba(220, 223, 230, 1);
  }
  .radio-icon-checked {
    color: rgb(49, 194, 124);
  }

  .radio-icon-checked-no {
    color: rgb(255, 0, 0);
  }

  .radio-icon-unchecked {
  }
  .radio-icon {
    position: relative;
    top: 3px;
  }
  .uploadFile {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    box-sizing: border-box;
    width: 40%;
    padding: 8px 10px 8px 12px;
    overflow: hidden;
    font-size: 14px;
    background-color: var(--color-fill-1);
    border-radius: var(--border-radius-small);
    transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
    justify-content: space-between;
    // margin-top: 10px;
  }
  .WaitSubmitted {
    // 待下达
    width: 95px;
    height: 40px;
    border-radius: 100px;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #c9cdd4;
    color: rgb(255, 255, 255);
    border: none;
  }

  .Examining {
    // 执行中
    width: 95px;
    height: 40px;
    border-radius: 100px;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #165dff;
    border: none;
  }

  .Pass {
    // 已通过
    width: 95px;
    height: 40px;
    border-radius: 100px;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(49, 194, 124);
    border: none;
  }

  .NoPass {
    //不通过
    width: 95px;
    height: 40px;
    border-radius: 100px;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f53f3f;
    border: none;
  }

  .Qualified {
    // 待执行
    width: 95px;
    height: 40px;
    border-radius: 100px;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 247, 232);
    border: none;
    color: #ff9a2e;
  }

  .Certification-report-item {
    width: 100px;
    height: 40px;
    background: inherit;
    background-color: rgba(61, 126, 255, 1);
    border: none;
    border-radius: 100px;
    color: white;
    line-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .auth-product {
    margin: 20px 60px;
  }
</style>
